<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="divport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="dist/styles/iview.css">
    <title>录音记录</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        html,
        body {
            height: 100%;
            width: 100%;
            background-color: rgba(246, 246, 246, 0.897);
        }
        
        div.container {
            width: 375px;
            height: 667px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -333.5px;
            margin-left: -187.5px;
            background-color: #fff;
            display: flex;
            flex-direction: column;
        }
        
        div.record-body {
            overflow-y: auto;
            flex: 1;
        }
        
        .body-item {
            display: flex;
            flex-direction: row;
        }
        
        .body-item .person,
        .send-item .person {
            height: 60px;
            line-height: 58px;
            padding: 0 10px;
            font-size: 24px;
            color: #090909;
        }
        
        .send-item {
            display: flex;
            flex-direction: row-reverse;
        }
        /* 语音气泡 */
        
        .speech {
            float: left;
            margin: 8px;
            padding: 6px;
            table-layout: fixed;
            word-break: break-all;
            position: relative;
            background: #ffffff;
            border: 1px solid #989898;
            border-radius: 8px;
            display: flex;
            flex-direction: row;
            cursor: pointer;
        }
        
        .duration {
            height: 30px;
            line-height: 30px;
            padding: 0 20px 0 30px;
            font-size: 14px;
        }
        
        .audio-icon {
            width: 30px;
            height: 30px;
            position: relative;
        }
        
        .speech:before {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            left: -20px;
            top: 10px;
            border: 10px solid;
            border-color: transparent #989898 transparent transparent;
        }
        
        .speech:after {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            left: -16px;
            top: 12px;
            border: 8px solid;
            border-color: transparent #ffffff transparent transparent;
        }
        
        .speech2 {
            float: left;
            margin: 8px;
            padding: 6px;
            table-layout: fixed;
            word-break: break-all;
            position: relative;
            background: #ffffff;
            border: 1px solid #989898;
            border-radius: 8px;
            display: flex;
            flex-direction: row;
        }
        
        .speech2 .duration {
            height: 30px;
            line-height: 30px;
            padding: 0 20px;
            font-size: 14px;
        }
        
        .speech2:before {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            right: -20px;
            top: 10px;
            border: 10px solid;
            border-color: transparent transparent transparent #989898;
        }
        
        .speech2:after {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            right: -16px;
            top: 12px;
            border: 8px solid;
            border-color: transparent transparent transparent #ffffff;
        }
        
        .box {
            box-sizing: border-box;
            position: relative;
        }
        
        .wifi-symbol {
            width: 30px;
            height: 30px;
            box-sizing: border-box;
            overflow: hidden;
            transform: rotate(135deg);
        }
        
        .wifi-circle {
            border: 3px solid #999999;
            border-radius: 50%;
            position: absolute;
        }
        
        .first {
            width: 3px;
            height: 3px;
            background: #cccccc;
            top: 26px;
            left: 26px;
        }
        
        .second {
            width: 15px;
            height: 15px;
            top: 19.8px;
            left: 19.8px;
            animation: fadeInOut 1s infinite 0.3s;
        }
        
        .third {
            width: 24px;
            height: 24px;
            top: 15px;
            left: 15px;
            animation: fadeInOut 1s infinite 0.6s;
        }
        
        @keyframes fadeInOut {
            0% {
                opacity: 0;
                /*初始状态 透明度为0*/
            }
            100% {
                opacity: 1;
                /*结尾状态 透明度为1*/
            }
        }
        
        .is-played {
            width: 10px;
            position: relative;
        }
        
        .is-played::before {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            left: 0px;
            top: 24px;
            border: 4px solid;
            border-color: red;
            border-radius: 50%;
        }
        
        div.delete-media>div {
            width: 30px;
            height: 30px;
            margin-top: 15px;
            cursor: pointer;
        }
        /* 底部 控制器 */
        
        .ctrl {
            height: 45px;
            position: relative;
            display: flex;
            flex-direction: row;
            box-sizing: border-box;
        }
        
        .time-wrappr {
            width: 120px;
            height: 45px;
            border-top: 1px solid #f3f3f3;
        }
        
        .fast-record {
            height: 45px;
            text-align: center;
            line-height: 45px;
            flex: 1;
            color: #ffffff;
            background-color: #206AC9;
            font-size: 15px;
            cursor: pointer;
        }
        
        [v-cloak] {
            display: none
        }
        
        .select-wrap {
            height: 100%;
            width: 100%;
            position: relative;
            cursor: pointer;
        }
        
        div.now-text {
            height: 100%;
            width: 100%;
            text-align: center;
            line-height: 45px;
            position: relative;
            padding-left: 20px;
        }
        
        div.now-text::before {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            left: 20px;
            top: 7px;
            border: 10px solid;
            border-color: transparent transparent #989898 transparent;
        }
        
        div.options-wrap {
            position: absolute;
            bottom: 45px;
            left: 0;
            width: 120px;
            z-index: 9999;
            border-left: 1px solid #f6f6f6;
            border-right: 1px solid #f6f6f6;
            background-color: #fff;
        }
        
        div.options-item {
            height: 45px;
            text-align: center;
            line-height: 45px;
            border-top: 1px solid #f6f6f6;
        }
        
        .interval-number {
            position: absolute;
            bottom: 48px;
            left: 3px;
            width: 45px;
            height: 45px;
            background-color: #e4393c;
            border-radius: 50%;
            line-height: 45px;
            text-align: center;
            color: #ffffff;
        }
    </style>
    <script src="js/js.cookie.min.js"></script>
    <script src="js/polyfill.min.js"></script>
</head>

<body>
    <div class="container" id="app" v-cloak>
        <audio ref="music"></audio>
        <div class='record-body' ref="recordsWrapper">
            <template v-for="(item,index) in tableData" :key="index">

                            <div class='body-item' v-if="item.senddirection === 1">
                                    <div class='person'>
                                        <Icon type="md-tablet-portrait" size="24" />
                                        <!-- <span class="icon iconfont icon-iconmydevices" style='font-size:24px;'></span>   -->
                                    </div>
                                    <div class='speech' @click="playYuYin(index)">
                                        <div class='duration'>{{item.updatetimeStr}}</div>
                                        <div class='audio-icon box'>
                                        <div class="wifi-symbol" v-show="item.show">
                                            <div class="wifi-circle first"></div>
                                            <div class="wifi-circle second"></div>
                                            <div class="wifi-circle third"></div>
                                        </div>
                                        </div>
                                    </div>
                                    <div class='is-played' v-if="item.readstatus === 0"></div>
                                    <div v-else class="delete-media">
                                        <div @click="deleteRecord(item)"><img src="./images/ic_close.png" style="width:100%;height:100%;"></div>
                                    </div>
                                </div>
                                <div v-if="item.senddirection === 2" class='send-item'>
                                    <div class='person'>
                                        <Icon type="ios-contact" size="24" />
                                        <!-- <span class="icon iconfont icon-shenfenzheng" style='font-size:24px;'></span>   -->
                                    </div>
                                    <div class='speech2'>
                                        <div class='duration'>{{item.updatetimeStr +" "+ item.intervalseconds +"s"}}</div>
                                    </div>
                                    <div class="delete-media">
                                        <div @click="deleteRecord(item)"><img src="./images/ic_close.png" style="width:100%;height:100%;"></div>
                                    </div>
                                </div>
                  
            </template>
        </div>
        <div class='ctrl'>

            <div class='time-wrappr'>
                <div class="select-wrap">
                    <div class="now-text" @click="isShowSelect=!isShowSelect">{{selectVal}}</div>
                    <div class="options-wrap" v-show="isShowSelect">
                        <div class="options-item" v-for="item in selectArr" :key="item" @click="onSelect(item)">{{item}}</div>
                    </div>
                </div>
            </div>
            <div class='fast-record' @click="handleClickSound">
                点击录音
            </div>
        </div>
        <div class="interval-number">{{intervalNumber}}</div>
    </div>
    <script src="js/gps51-jquery.js"></script>
    <script src="dist/vue.min.js"></script>
    <script src="dist/iview.min.js"></script>
    <script src="js/vue-i18n.min.js"></script>
    <script src="js/language.js"></script>
    <script src="custom/languageex.js"></script>
    <script src="js/config.js"></script>
    <script src="js/dateformat.js"></script>
    <script src="js/util.js"></script>
    <script>
        var token = utils.getParameterByName("token");
        var timeDifference = DateFormat.getOffset();
        var vRoot = new Vue({
            i18n: utils.getI18n(),
            el: "#app",
            data: {
                intervalNumber: 60,
                currentIndex: null,
                audio: null,
                deviceId: "",
                isShowSelect: false,
                selectVal: "10s",
                selectArr: ["10s", "20s", "30s"],
                tableData: []
            },
            methods: {
                deleteRecord: function(item) {
                    var index = this.tableData.indexOf(item);
                    var url = myUrls.deleteAudio(),
                        me = this;
                    if (!confirm("确认删除这条记录?")) return;
                    utils.sendAjax(url, {
                        mediaid: item.mediaid
                    }, function(resp) {
                        if (resp.status == 0) {
                            me.tableData.splice(index, 1);
                        }
                    });
                },
                onSelect: function(val) {
                    this.isShowSelect = false;
                    this.selectVal = val;
                },
                playYuYin: function(index) {
                    if (index === this.currentIndex) return;
                    var audio = this.$refs.music;
                    var item = this.tableData[index];
                    this.tableData.forEach(function(record) {
                        record.show = false;
                    });
                    item.show = true;
                    if (!audio.paused) {
                        audio.pause();
                    }
                    audio.src = item.url;
                    audio.play();
                    item.readstatus !== 1 ? this.readMedia(item.mediaid) : "";
                    item.readstatus = 1;
                    this.currentIndex = index;

                },
                readMedia: function(mediaid) {
                    var url = myUrls.readMedia();
                    utils.sendAjax(url, {
                        mediaid: mediaid
                    }, function(resp) {});
                },
                handleClickSound: function() {
                    if (this.deviceId == "") return;
                    var me = this;
                    var url = myUrls.recordAudio();
                    utils.sendAjax(url, {
                        deviceid: this.deviceId,
                        interval: parseFloat(this.selectVal)
                    }, function(resp) {
                        if (resp.status == 0) {
                            setTimeout(function() {
                                document.getElementsByClassName("record-body")[0].scrollTop = 10000;
                            }, 10);
                            me.intervalNumber = 60;
                            me.queryMedia();
                            me.setInterval();
                            me.$Message.success("发送成功");
                        } else {
                            me.$Message.error("发送失败");
                        }
                    });
                },
                setInterval: function() {
                    if (this.intervalIns !== null) return;
                    var me = this;
                    this.intervalIns = setInterval(function() {
                        me.intervalNumber = --me.intervalNumber;
                        if (me.intervalNumber < 1) {
                            me.intervalNumber = 60;
                            clearInterval(me.intervalIns);
                            me.intervalIns = null;
                        };
                    }, 1000);
                },
                queryMedia() {
                    var url = myUrls.queryMedia(),
                        me = this;
                    utils.sendAjax(url, {
                        deviceid: this.deviceId
                    }, function(resp) {
                        if (resp.status == 0) {
                            if (resp.records && resp.records.length) {
                                var tableData = [],
                                    records = resp.records;
                                for (var index = 0; index < records.length; index++) {
                                    const record = records[index];
                                    record.show = false;
                                    record.updatetimeStr = DateFormat.longToLocalDateTimeStr(record.updatetime);
                                    tableData.push(record);
                                }
                                me.tableData = tableData.sort(function(a, b) {
                                    return a.updatetime - b.updatetime;
                                });
                                var arrivedtime = 0;
                                var len = me.tableData.length - 1;
                                for (var i = len; i >= 0; i--) {
                                    var record = me.tableData[i];
                                    if (record.senddirection === 1) {
                                        arrivedtime = record.arrivedtime;
                                        break;
                                    }
                                };
                                if (arrivedtime > me.arrivedtime) {
                                    clearInterval(me.intervalIns);
                                    me.intervalIns = null;
                                }
                                me.arrivedtime = arrivedtime;
                                setTimeout(function() {
                                    document.getElementsByClassName("record-body")[0].scrollTop = 10000;
                                }, 10);
                            }

                        } else {

                        }

                    })
                },
                getLocalMediaByDeviceId: function(deviceId) {
                    var isHas = true;
                    var newPushLocalMedia = localStorage.getItem("devicemedia-" + deviceId);
                    console.log("newPushLocalMedia", newPushLocalMedia);
                    if (newPushLocalMedia !== null && newPushLocalMedia !== "null") {

                        var newPushLocalMediaObject = JSON.parse(newPushLocalMedia);
                        var mediaid = newPushLocalMediaObject.mediaid;
                        for (var i = 0; i < this.tableData.length; i++) {
                            console.log(mediaid, this.tableData[i].mediaid);
                            if (mediaid == this.tableData[i].mediaid) {
                                isHas = false;
                                break;
                            }
                        }
                    } else {
                        isHas = false;
                    }
                    return isHas;
                },
                clearLocalMedia: function() {
                    localStorage.setItem("devicemedia", null);
                },
                queryLocalMedia: function() {
                    var newMedia = this.getLocalMediaByDeviceId(this.deviceId),
                        me = this;
                    if (newMedia == true) {

                        // newMedia.show = false;
                        // newMedia.updatetimeStr = DateFormat.longToLocalDateTimeStr(newMedia.updatetime);
                        // this.tableData.push(newMedia);
                        // this.clearLocalMedia();
                        // setTimeout(function () { document.getElementsByClassName("record-body")[0].scrollTop = 10000; },10);
                        me.queryMedia();
                    }
                }
            },
            mounted: function() {
                var deviceId = utils.getParameterByName("deviceid");
                var me = this;
                this.audio = this.$refs.music;
                if (deviceId) {
                    this.deviceId = deviceId;
                    this.queryMedia();
                }
                this.intervalNum = 60;
                setInterval(function() {
                    me.intervalNum = --me.intervalNum;
                    if (me.intervalNum % 5 == 0) {
                        me.queryMedia();
                    }
                    if (me.intervalNum < 1) {
                        me.intervalNum = 60;
                        // me.queryMedia();
                    };
                }, 1000);
                this.arrivedtime = 0;
                this.intervalIns = null;
            }
        })
    </script>
</body>

</html>